<!-- 通讯录首页 -->
<template>
  <div id="AddressBook">
    <!-- 头部 -->
    <Head title="通讯录"></Head>
    <!-- 右边的A-Z字母 -->
    <LetterRight></LetterRight>
    <div id="AddressMain">
      <!-- 头部搜索功能 -->
      <Search placeholder="搜索"></Search>
      <!-- 通讯录整体功能 -->
      <div id="AddressButtom">
        <div v-for="(Address,index) in AddressBoxas" :key="index" @click='GotoMain(index)' class="AddressBox BoxActive">
          <img alt="" :src='Address.src' />
          <div>{{Address.name}}</div>
        </div>
      </div>
      <!-- 好友 -->
      <div id="Friends">
        <FriendList v-for="(Friends,index) in FriendsMain"  @gotoDetailsClick="gotoDetails($event)" :key="index" :letter='FriendsMain[index].letter'  :data="FriendsMain[index].data"></FriendList>
      </div>
    </div>

    <!-- 底部部分 -->
    <Tab :active="1" info="80"></Tab>
  </div>
</template>

<script>
import Head from "../components/Head";
import Tab from "../components/Tab";
import LetterRight from "@/components/LetterRight";
import Search from "@/components/Search";
import FriendList from "@/components/FriendList";

export default {
  name:'AddressBook',
  data(){
    return{
      AddressBoxas:[
        {src:require('@/assets/img/NewFriends.png'),name:'新朋友'},
        {src:require('@/assets/img/AddFriend.png'),name:'添加好友'},
        {src:require('@/assets/img/GroupChat.png'),name:'已保存群聊'},
      ],
      FriendsMain:[
        // {
        //   letter:'A',
        //   data:[
        //     {pic:'5','name':5},
        //     {pic:'5','name':5},
        //     {pic:'5','name':5},
        //     {pic:'5','name':5},
        //   ]
        // }
      ]
    }
  },
  components:{
      Head,
      Tab,
      LetterRight,
      Search,
      FriendList,
  },
  mounted(){
    /**
     * 获取 好友列表
     * remark:备注或昵称
     */
    this.$get(urlConfig.friendList)
    .then(res => {
        var keys=[];//定义一个数组用来接受key  
        var values=[];//定义一个数组用来接受value 
        for(var key in res.data){
          keys.push(key);
          values.push(res.data[key]);//取得value
        }
        for(let i=0; i<keys.length; i++){
          this.FriendsMain.push({"data":values[i],"letter":keys[i]})
        }
    })
  },
  methods:{
    /* 头部新朋友，添加好友，已保存联系人点击事件 */
    GotoMain(index){
      console.log(index)
      if(index == 0){
        this.$router.push('/NewFriend')
      }else if(index == 1){
        this.$router.push('/AddFriend')
      }else{
        this.$router.push('/GroupChat')
      }
    },
    /**
    * 点击进入通话页面
    */
    gotoDetails(id){
      console.log(id)

    }
  }
};
</script>

<style scoped lang='less'>
  #AddressBook{
    font-size: 28px;
    #AddressMain{
      position: fixed;
      top: 88px;
      bottom: 98px;
      overflow: scroll;
      z-index: 10;
      #AddressButtom{
        margin-top: 10px;
        height: 330px;
        background: #fff;
        padding-left: 30px;
        .AddressBox {
          height: 110px;
          display: flex;
          flex-direction: row;
          align-items: center;
          justify-content: space-between;
          img {
            width: 80px;
            height: 80px;
          }
          div {
            height: 109px;
            width: 600px;
            line-height: 109px;
            font-size: 32px;
            border-bottom: 1px solid #e8e8e8;
          }
          &:last-child div {
            border-bottom: 0px;
            height: 110px;
          }
        }
      }
    }
    #Friends {
      margin-top: 10px;
    } 
  }
</style>
